<template>
    <div class="distribution-center">
        <div class="center-head">
            <div class="avatar-box">
                <div class="avatar">
                    <img :src="userInfo.headimgurl" alt="">
                </div>
                <div class="level">
                    <img src="~assets/icons/vip1.png" alt="">
                    <span>一级分销</span>
                </div>
            </div>
            <div class="commission">
                <div class="commission-box" @click="toCommission">
                    <span>累计佣金</span>
                    <span>￥{{money['total_commission']}}</span>
                </div>
                <div class="commission-box" @click="toCommission">
                    <span>可提现佣金</span>
                    <span>￥{{money['commission']}}</span>
                </div>
            </div>
        </div>
        <div class="center-others">
            <div class="others" @click="toCode">
                <div class="left">
                    <div class="img-box">
                        <img src="~assets/icons/center_icon1.png" alt="">
                    </div>
                    <span>我的二维码</span>
                </div>
                <div class="right">
                    <img src="~assets/icons/arrow.png" alt="">
                </div>
            </div>
            <div class="others" @click="toTeam">
                <div class="left">
                    <div class="img-box">
                        <img src="~assets/icons/center_icon2.png" alt="">
                    </div>
                    <span>我的团队</span>
                </div>
                <div class="right">
                    <img src="~assets/icons/arrow.png" alt="">
                </div>
            </div>
            <div class="others" @click="toCommissionDetail">
                <div class="left">
                    <div class="img-box">
                        <img src="~assets/icons/center_icon3.png" alt="">
                    </div>
                    <span>佣金明细</span>
                </div>
                <div class="right">
                    <img src="~assets/icons/arrow.png" alt="">
                </div>
            </div>
            <div class="others" @click="getMoney">
                <div class="left">
                    <div class="img-box">
                        <img src="~assets/icons/money.png" alt="">
                    </div>
                    <span>提现明细</span>
                </div>
                <div class="right">
                    <img src="~assets/icons/arrow.png" alt="">
                </div>
            </div>
            <div class="others" @click="toNotice">
                <div class="left">
                    <div class="img-box">
                        <img src="~assets/icons/center_icon4.png" alt="">
                    </div>
                    <span>我的通知</span>
                </div>
                <div class="right">
                    <img src="~assets/icons/arrow.png" alt="">
                </div>
            </div>
        </div>
        <div class="tel-num">
            <div class="img-box">
                <img src="~assets/icons/center_icon5.png" alt="">
            </div>
            <span>联系我们</span>
            <span>400-400-4000</span>
        </div>
    </div>
</template>

<script>
export default {
    name:'center',
    data(){
        return {
            money:{},
            userInfo:{}
        }
    },
    methods:{
        toCode(){
            this.$router.push('/distribution/codeer');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '我的二维码';
        },
        toTeam(){
            this.$router.push('/distribution/team');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '我的团队';
        },
        toCommission(){
            this.$router.push('/distribution/commission');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '佣金提现';
        },
        toCommissionDetail(){
            this.$router.push('/distribution/commission_detail');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '佣金明细';
        },
        getMoney(){
            this.$router.push('/distribution/money');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '提现明细';
        },
        toNotice(){
            this.$router.push('/distribution/notice');
            this.$store.state.oldTab = this.$store.state.tab;
            this.$store.state.tab = '消息通知';
        },
        getMoneyDetail(){
            let that = this;
            let token = localStorage.getItem('token');
            let disNum = localStorage.getItem('distribution');
            that.$ajax(that, 'get', that.$api.distributionMoney+disNum, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.money = res.data['msg'];
                }else{
                    that.toast(res.data['msg']);
                }
            })
        },
        getUserInfo(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.userInfo, null, token, function(res){
                if(res.data['msg']){
                    that.userInfo = res.data.msg;
                }else{
                    that.toast(re.data.msg)
                }
                loader.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '分销中心';
        this.getMoneyDetail();
        this.getUserInfo();
    },
    activated(){
        this.$store.state.tab = '分销中心';
    }
}
</script>

<style lang='less'>
@rem:100rem;

.distribution-center{
    width: 750/@rem;
    margin-top: 88/@rem;
    .center-head{
        width: 100%;
        .avatar-box{
            width: 100%;
            height: 238/@rem;
            background-image: url('http://palk082f3.bkt.clouddn.com/image/distribution/header_bg.jpg');
            background-repeat: no-repeat;
            background-size: 750/@rem 238/@rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .avatar{
                width: 146/@rem;
                height: 146/@rem;
                overflow: hidden;
                border-radius: 50%;
                border: 2/@rem solid #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    height: 146/@rem;
                }
            }
            .level{
                margin-top: 20/@rem;
                display: flex;
                align-items: center;
                img{
                    width: 28/@rem;
                    height: 28/@rem;
                }
                span{
                    font-size: 28/@rem;
                    color: #ffffff;
                    margin-left: 10/@rem;
                }
            }
        }
        .commission{
            width: 100%;
            height: 120/@rem;
            display: flex;
            background: #ffffff;
            border-bottom: 1px solid #e5e5e5;
            .commission-box{
                width: 50%;
                display: flex;
                box-sizing: border-box;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                span{
                    font-size: 30/@rem;
                    text-align: center;
                }
                span:nth-of-type(2){
                    margin-top: 16/@rem;
                }
            }
            .commission-box:active{
                background: #f4f4f4;
            }
            .commission-box:nth-of-type(1){
                border-right: 1px solid #e5e5e5;
            }
        }
    }
    .center-others{
        width: 100%;
        margin-top: 14/@rem;
        background: #fff;
        .others{
            width: 100%;
            height: 88/@rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f0f0f0;
            .left{
                height: 100%;
                display: flex;
                align-items: center;
                margin-left: 20/@rem;
                .img-box{
                    display: flex;
                    align-items: center;
                    width: 66/@rem;
                    height: 100%;
                }
                span{
                    font-size: 28/@rem;
                }
            }
            .right{
                width: 76/@rem;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    height: 36/@rem;
                    width: 36/@rem;
                }
            }
        }
        .others:nth-of-type(1){
            .img-box{
                img{
                    width: 36/@rem;
                    height: 36/@rem;
                }
            }
        }
        .others:nth-of-type(2){
            .img-box{
                img{
                    width: 36/@rem;
                    height: 36/@rem;
                }
            }
        }
        .others:nth-of-type(3){
            .img-box{
                img{
                    width: 38/@rem;
                    height: 34/@rem;
                }
            }
        }
        .others:nth-of-type(4){
            .img-box{
                img{
                    width: 44/@rem;
                    height: 44/@rem;
                    transform: translateX(-4/@rem);
                }
            }
        }
        .others:nth-of-type(5){
            .img-box{
                img{
                    width: 32/@rem;
                    height: 38/@rem;
                }
            }
        }
    }
    .tel-num{
        width: 100%;
        height: 88/@rem;
        margin-top: 10/@rem;
        background: #ffffff;
        display: flex;
        align-items: center;
        .img-box{
            margin-left: 20/@rem;
            width: 38/@rem;
            height: 38/@rem;
            img{
                width: 38/@rem;
                height: 38/@rem;
            }
            
        }
        span{
            font-size: 30/@rem;
            margin-left: 20/@rem;
        }
        span:nth-of-type(2){
            color: #6699ff;
        }
    }
}
</style>
